@extends("backend.layout.main")

@section("after.css")
<link type="text/css" href="/backend/css/jquery.treeview.css" rel="Stylesheet">
<script src="/backend/js/jquery.hDialog.min.js"></script>
<script src="/backend/js/jquery.treeview.js"></script>
<script src="/backend/js/jquery.ui.js"></script>
@endsection

@section("right_content")

    <!--middle-->
<div class="mainWrapBox">
        <div class="mainBox">
            <h1><a href="">公司设置</a> / 组织与员工管理</h1>
            <div class="index-cen mt10 clearfix">
    <!--dementpart-->
    <div class="group-left mr10" id="main-left">
        <div class="group-lefta mb20">
            <h2 style="margin: 0;">部门列表
                <span class="f_r adddivision"><a href="#" class="btn green" data-toggle="modal" data-target="#deptModal">创建部门</a></span>
            </h2>
            <div class="mt10 group-ov">
                <ul class="treeview" id="tree">

                    <li id="tree2" class="collapsable"></li>
                    <li class="last">
                        <span>
                            <strong>公司访客</strong>
                        </span>
                    </li>
                </ul>
            </div>
        </div>
    </div>



            <div class="group-right" id="main-right" style="height: 1104px;">
                <div class="group-righta">
                    <h2 style="margin: 0;">
                           <span id="deptNameTitle" style="font-size: inherit;">全公司666</span>

                          <span class="f_r">
                            <span class="search_divs">
                                <input class="input" style="width: 200px;" placeholder="搜索666" id="keyword">

                            </span>
                            &nbsp;&nbsp;


                           <span class="addEmployeeBtn">
                            <a href="###" class="btn green" id="addEmployeeBtn">添加员工</a>
                           </span>


                        </span>

                    </h2>
                    <input type="hidden" id="deptIdTitle">
                    <input type="hidden" id="type" value="3">

                    <div class="group-rb">
                        <input type="hidden" name="start" id="start" value="0">
                        <input type="hidden" name="limit" id="limit" value="20">

                        <div id="deptUserList"> <table cellpadding="0" cellspacing="0" class="table left" id="yuang_table">
    <thead class="table-header">
    <tr>
        <th style="width: 50px">
            <input type="checkbox" class="group-io" id="checkAll"></th>
        <th style="width: 70px">姓名</th>
        <th style="width: 200px">邮箱</th>
        <th style="width: 100px">部门</th>
        <th style="width: 100px">职务</th>
        <th style="width: 100px">直属上级</th>
        <th style="width: 100px">角色组</th>
<!--         <th style="width: 150px">最近登录时间</th> -->
        <th style="width: 100px">操作</th>
    </tr>
    </thead>
    <tbody class="table-body">

     @foreach( $Member_all as $m )
        <tr>


            <td>

            <div class="content-2line">
             <input type="checkbox" value="" name="userId" data-username="" onclick="selectUser(this)" >
            </div>

            </td>
            <td>{{$m->username}}</td>
            <td><div class="content-2line">{{$m->email}}</div></td>


            @if( $m )
            <td><div class="content-2line">
                {{ $m->name }}
            </div></td>
            @else
            <td><div class="content-2line">

            </div></td>
            @endif


            @if($m)
            <td><div class="content-2line">
                {{ $m->roleName }}
            </div></td>

 @else
             <td><div class="content-2line">

            </div></td>

 @endif
            <td><div class="content-2line">

            </div></td>

<!--                     <td title="公司管理者"><div class="content-2line">
                    公司管理者666
                    </div></td> -->
            <td>
            </td>
            <td>


    <a href="javascript:;" class="editDeptUser" name="editUidMsg" data-id ="696"  a_id="{{ $m->uid }}">编辑</a>
                <a href="javascript:;" class="keaveDeptUser" data-id="696">禁用</a>


            </td>
        </tr>
            @endforeach
    </tbody>
</table>

<table class="table ">
    <tbody class="table-footer">
    <tr>
        <td style="text-align: left;">
            <span>

            </span>
        </td>
        <td style="text-align: right; vertical-align: middle;"></td>
        <td style="text-align: right;">

                {!! $Page->render() !!}
        </td>
    </tr>
    </tbody>
</table>
</div>
                    </div>
                </div>
            </div>
        </div>
            <div class="modal" id="addEmployeeModal" style="display: none">
    <div data="check" class="modal-dialog" style="width: 820px;">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="employee_modal_title">填写员工基本信息</span>
            </div>
            <form id="employeeForm" action="/MangeSubmit" method="post">
            {{csrf_field()}}

                <input type="hidden" name="user_id"  value="">


                <div class="modal-body" style="padding: 10px; width: 100%; max-height: 500px;">
                    <div style="width: 50%;float: left">
                        <table cellpadding="0" cellspacing="0" class="jueszu_tab" style="width: 100%; margin-bottom: 10px;">
                            <tbody><tr>
                                <td class="jueszu_tab_f" align="right">
                                    <div class="inbox-nav" style="text-align: right"><span style="padding: 5px 0;">基本信息</span></div>
                                </td>
                                <td></td>
                            </tr>
                            <tr>
                                <input type="hidden" name="userId" id="userId" value="">
                                <td class="jueszu_tab_f" align="right">邮箱 <span class="colorf00">*</span></td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value="" placeholder="邮箱" class="inputStyle w200" name="email" id="email">
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">姓名 <span class="colorf00">*</span></td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value="" placeholder="姓名" class="inputStyle w200" name="name" id="username" maxlength="20">
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">性别</td>
                                <td class="jueszu_tab_s pl10">
                                    <div class="left">
                                        <input type="radio" name="sex" value="0">男
                                    </div>
                                    <div style="padding-left: 20px" class="left">
                                        <input type="radio" name="sex" value="1">女
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">手机</td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value="" placeholder="手机" name="mobile" id="mobile" class="inputStyle w200">
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">微信</td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value="" placeholder="微信" name="wechat" id="wechat" class="inputStyle w200">
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">生日</td>
                                <td class="jueszu_tab_s pl10">
                                 <input type="text" value=""  placeholder="生日(格式:19xx-xx-xx)" class=" inputStyle w200" name="joinDate" >
                                </td>

                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">专业</td>
                                <td class="jueszu_tab_s pl10">

                                 @foreach($ProjectRole as $p)
                                    <div class="left">
                                        <input type="radio" name="major" value="{{$p->rid}}">{{$p->name}}
                                    </div>
                                  @endforeach
                                </td>
                            </tr>
                            <tr>
                                <td class="jueszu_tab_f" align="right">执业资格</td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value="" placeholder="执业资格" name="certified" id="certified" class="inputStyle w200">
                                </td>
                            </tr>

                        </tbody></table>
                    </div>
                    <div style="width: 50%;float: right">
                        <table cellpadding="0" cellspacing="0" class="jueszu_tab" style="width: 100%;margin-bottom: 10px;">

                            <tbody><tr>
                                <td class="jueszu_tab_f" align="right">
                                    <div class="inbox-nav" style="text-align: right"><span style="padding: 5px 0;">职务信息</span></div>
                                </td>
                                <td></td>
                            </tr>


                            <tr>

                                <td class="jueszu_tab_f" align="right">入职时间</td>
                                <td class="jueszu_tab_s pl10">
                                    <input type="text" value=""  placeholder="入职时间(格式:19xx-xx-xx)" class=" inputStyle w200" name="joinDate" >
                                </td>
                            </tr>

                          <tr>

                                <td class="jueszu_tab_f" align="right">所属部门 <span class="colorf00">*</span></td>

                        <td>
                     @foreach($Department as $d)
<!--                         <span>
                            <strong>{{$d->name}}</strong> -->

                            <!-- <input type="hidden" id="e-mail" name="department" value="{{$d->department_id}}"/>  -->
<!--                         </span> -->

                        <input type="radio" name="deptUserId" id="deptUserId" value="{{ $d->department_id }}">{{$d->name}}

                    @endforeach

                    </td>
                            </tr>

                            <tr>
                                <td class="jueszu_tab_f" align="right">职位</td>
                                <td class="jueszu_tab_s pl10">
                                    <div class="left">
                                        <input type="radio" name="gid" value="1">管理员
                                        <!-- <input type="hidden" name="gid" value="1"> -->
                                    </div>
                                    <div style="padding-left: 20px" class="left">
                                        <input type="radio" name="gid" value="2">普通员工
                                       <!--  <input type="hidden" name="gid" value="2"> -->

                                    </div>
                                </td>
                            </tr>

                        </tbody>

                        </table>
                    </div>
                    <div class="cl"></div>
                    <div id="costBasicRecord"></div>
                </div>
                <div class="cl"></div>
                <div class="modal-footer">
                    <input type="submit" value="提交" class="btn green" id="btnSaveUserSubmit">
                </div>
                <div class="cl"></div>
            </form>


        </div>
    </div>
</div>
        </div>
</div>
<script type="text/javascript">
// 文件树
    $(document).ready(function(){
        $("#tree").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            },
            animated: "fast",
        });
    });

// 弹出从窗口初始化
 $(function(){

     
function opendeptModal(obj) {
    $(obj).hDialog({
       box:'#deptModal',
       width:520,
       positions: 'top',
       modalHide: false,
       closeBg: '#fff',
     }); //默认调用
}
function openaddEmployeeModal(obj) {
    $(obj).hDialog({
    box: '#addEmployeeModal',
    width:820,
    positions: 'top',
    modalHide: false,
    closeBg: '#fff',
  });
    $(function(){
    $('.editDeptUser').on('click',function(){
        var _Token="{{ csrf_token() }}";
        $('input[name=user_id]').val($(this).attr('a_id'));
        var id=$(this).attr('a_id');
        $.ajax({
            type: "POST",
            url: "/memberdata",
            data: {id: id},
            headers: {
                'X-CSRF-TOKEN': _Token
            },
            dataType: 'json',
            success: function(data){
                $("#email").val(data.email);
                $("#mobile").val(data.phone);
                $("#username").val(data.username);
                $("#wechat").val(data.wechat);
                $("#birthday").val(data.birthday);
                $("#joinDate").val(data.entrytime);
                $("#userId").val(data.uid);
               }
            });
        });
    });
}



opendeptModal('.adddivision');

openaddEmployeeModal('.addEmployeeBtn');
openaddEmployeeModal('.editDeptUser');
// queryOrgUsers();









   //日历初始化
      // $('#birthday').datepicker({
      //    dateFormat : 'yy-mm-dd',
      //    dayNamesMin : ['日','一','二','三','四','五','六'],
      //    monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      //    monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      //    changeMonth : true,
      //    changeYear : true,
      //    maxDate : 0,
      //    yearRange : '1900:2020',
        
      // })

      // $('#joinDate').datepicker({
      //    dateFormat : 'yy-mm-dd',
      //    dayNamesMin : ['日','一','二','三','四','五','六'],
      //    monthNames : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      //    monthNamesShort : ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
      //    changeMonth : true,
      //    changeYear : true,
      //    maxDate : 0,
      //    yearRange : '2000:2020',
        
      // });
 


        $("#tree_list2").find("em").bind("click", function () {
            tree_max(this);
        });

        function tree_max(obj) {
            var data = $(obj).attr("data");
            if (data == "off") {
                $(obj).parent().css("height", "auto");
                $(obj).parent().css("overflow", "visible");
                $(obj).text("-");
                $(obj).attr("data", "on");
            } else {
                $(obj).parent().css("height", "25px");
                $(obj).parent().css("overflow", "hidden");
                $(obj).text("+");
                $(obj).attr("data", "off");

            }
            var s_height = $("#tree_list2").height();
            if (s_height > 250) {
                $(".juese_text_right_main").css("overflow", "scroll");
                $(".juese_text_right_main").css("overflow-x", "hidden");
            } else {
                $(".juese_text_right_main").css("overflow", "");
                $(".juese_text_right_main").css("overflow-x", "");
            }
        }

        /*部门弹框js---end-*/
         $("#listDept").delegate("li", "click", function () {
            $("#pid").val($(this).find("span").attr("data-id"));
            $("#pname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#orguserlist").delegate("li", "click", function () {
            $("#deptUserpid").val($(this).find("span").attr("data-id"));
            $("#deptUserpname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#ranklist").delegate("li", "click", function () {
            $("#deptUserRankId").val($(this).find("span").attr("data-id"));
            $("#deptUserRankName").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
         $("#rolelistforAdd").delegate("li", "click", function () {
            event.stopPropagation();
            var display=$(this).find('span').css('display');
            if(display=='none'){
                $(this).find('span').css('display','block');
            }else{
                 $(this).find('span').css('display','none');
            }
            var li=$(this).parents().children('li');
            var data_id="";
            var data_name="";
            var count=0;
            for(var i=0;i<li.length;i++){       
                if(li.eq(i).find('span').css('display')=='block'){
                    count++;
                    if(count==1){
                        data_id=data_id+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+li.eq(i).find('span').attr('data-name');
                    }else{
                        data_id=data_id+','+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+','+li.eq(i).find('span').attr('data-name');
                    }               
                }           
            }
            $("#addUserRoleIds").val(data_id);
            $("#addUserRoleName").val(data_name);

            
        });


        $('body').click(function(){
            $('.Pop_up_box').hide();
        }); 

         $("#tree").delegate("li strong", "mouseenter", function (e) {
                $(this).parent().siblings(".group-pa").show();
                $(this).parents("ul").siblings(".group-pa").hide();
            });
        $("#tree").delegate("li", "mouseleave", function (e) {
                $(this).children(".group-pa").hide();
           });
 //添加部门重置 
         function formReset() {
            $("#editForm")[0].reset();
            $("#pid").val("");
            $("#id").val("");
          }

        $("#tree").delegate("span[class='group-pa3']", "click", function () {
        
                formReset();
                var pid = $(this).parent("div").attr("data-id");
                var pname = $(this).parent("div").attr("data-name");
                $("#pid").val(pid);
                $("#pname").val(pname); 
        });
        opendeptModal('.group-pa3');

//修改部门
         
//删除部门
       $("#tree").delegate("span[class='group-pa1']", "click", function () {
        var id = $(this).parent("div").attr("data-id");
        if (confirm("确定要删除这个部门吗?")) {
           alert('删除成功');
        }
          
     });
      
      $('.perMesg').mouseenter(function(){
          $(this).find('dd').addClass('showTrsm');
      }).mouseleave(function(){
        $(this).find('dd').removeClass('showTrsm');
      })
});



       
        function juese_mse(obj) {
            $(obj).css("display", "block");
        }
        function blu_xm_js(obj) {
            $(obj).css("display", "none");
            $(obj).parent().find("input:text").blur();
        }
        function showDepts(obj,e) {
            $('.Pop_up_box').hide();
            $(obj).siblings("div").show();
            event.stopPropagation();
        }
        function setDept(obj, deptId, name) {
            $("#deptId").val(deptId);
            $("#deptname").val(name);
            $("#deptsDiv").hide();
        }




        //部门列表
function queryDepartment() {
    $.ajax({
        url: "/department/departmentlist",

        type: 'GET',
        dataType: 'json',
        cache:false,
        success: function (data) {
            var tree = '<span><strong>全公司</strong></span><div class="group-pa" data-id="0" data-name="全公司"><span class="group-pa3"></span></div>';
            tree += deptsTreeHtml(data.deptsTree);
            //console.log(tree);
            $("#tree2").html(tree);
            $("#listDept").html(deptsListHtml(data.depts));
            $("#listDept2").html(deptsListHtml(data.depts));
            listDept = data.depts;
            $(".treeview").treeview({
                collapsed: false,
                animated: "medium",
                control: "#sidetreecontrol",
                persist: "location",

            });
        }
    });
}
function deptsListHtml(depts) {
    var html = '';
    $.each(depts, function (index, ele) {
        html += "<li data-id='" + ele.id + "'><a href='javascript:;'>" + ele.name + "</a>"
                + "<span class='right gouxuan'></span></li>";
    });
    html += '';
    return html;
}

function deptsTreeHtml(depts) {
    var html = '<ul class="treeview">';
    $.each(depts, function (index, ele) {
        html += "<li><span><strong>" + ele.name + "</strong></span>"
                + "<div class='group-pa' data-id='" + ele.id + "'data-name='" + ele.name + "'>"
                + "<span class='group-pa3'></span>"
                + "<span class='group-pa2'></span>"
                + "<span class='group-pa1'></span>"
                + "</div> ";
        if (ele.childDepartment.length > 0) {
            html += deptsTreeHtml(ele.childDepartment);
        }
        html += "</li>";
    });
    html += '</ul>';
    return html;
}



function opendeptModal(obj) {
    $(obj).hDialog({
       box:'#deptModal',
       width:520,
       positions: 'top',
       modalHide: false,
       closeBg: '#fff',
     }); //默认调用
}
function openaddEmployeeModal(obj) {
    $(obj).hDialog({
    box: '#addEmployeeModal',
    width:820,
    positions: 'top',
    modalHide: false,
    closeBg: '#fff',
  });

}

    
$(function(){
    
     $("#tree").treeview({
            toggle: function() {
                console.log("%s was toggled.", $(this).find(">span").text());
            },
            animated: "fast",
        });
        
    
     $("#tree_list2").find("em").bind("click", function () {
            tree_max(this);
        });

        function tree_max(obj) {
            var data = $(obj).attr("data");
            if (data == "off") {
                $(obj).parent().css("height", "auto");
                $(obj).parent().css("overflow", "visible");
                $(obj).text("-");
                $(obj).attr("data", "on");
            } else {
                $(obj).parent().css("height", "25px");
                $(obj).parent().css("overflow", "hidden");
                $(obj).text("+");
                $(obj).attr("data", "off");

            }
            var s_height = $("#tree_list2").height();
            if (s_height > 250) {
                $(".juese_text_right_main").css("overflow", "scroll");
                $(".juese_text_right_main").css("overflow-x", "hidden");
            } else {
                $(".juese_text_right_main").css("overflow", "");
                $(".juese_text_right_main").css("overflow-x", "");
            }
        }

        /*部门弹框js---end-*/
         $("#listDept").delegate("li", "click", function () {
            $("#pid").val($(this).find("span").attr("data-id"));
            $("#pname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#orguserlist").delegate("li", "click", function () {
            $("#deptUserpid").val($(this).find("span").attr("data-id"));
            $("#deptUserpname").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
        $("#ranklist").delegate("li", "click", function () {
            $("#deptUserRankId").val($(this).find("span").attr("data-id"));
            $("#deptUserRankName").val($(this).find("span").attr("data-name"));
            $(this).closest(".Pop_up_box").hide();
        });
         $("#rolelistforAdd").delegate("li", "click", function () {
            event.stopPropagation();
            var display=$(this).find('span').css('display');
            if(display=='none'){
                $(this).find('span').css('display','block');
            }else{
                 $(this).find('span').css('display','none');
            }
            var li=$(this).parents().children('li');
            var data_id="";
            var data_name="";
            var count=0;
            for(var i=0;i<li.length;i++){       
                if(li.eq(i).find('span').css('display')=='block'){
                    count++;
                    if(count==1){
                        data_id=data_id+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+li.eq(i).find('span').attr('data-name');
                    }else{
                        data_id=data_id+','+li.eq(i).find('span').attr('data-id');
                        data_name=data_name+','+li.eq(i).find('span').attr('data-name');
                    }               
                }           
            }
            $("#addUserRoleIds").val(data_id);
            $("#addUserRoleName").val(data_name);

            
        });


        $('body').click(function(){
            $('.Pop_up_box').hide();
        }); 

         $("#tree").delegate("li strong", "mouseenter", function (e) {
                $(this).parent().siblings(".group-pa").show();
                $(this).parents("ul").siblings(".group-pa").hide();
            });
        $("#tree").delegate("li", "mouseleave", function (e) {
                $(this).children(".group-pa").hide();
           });
 //添加部门重置 
         function formReset() {
            $("#editForm")[0].reset();
            $("#pid").val("");
            $("#id").val("");
          }

        $("#tree").delegate("span[class='group-pa3']", "click", function () {
        
                formReset();
                var pid = $(this).parent("div").attr("data-id");
                var pname = $(this).parent("div").attr("data-name");
                $("#pid").val(pid);
                $("#pname").val(pname); 
        });
        // opendeptModal('.group-pa3');
        queryDepartment();

//修改部门
         
//删除部门
       $("#tree").delegate("span[class='group-pa1']", "click", function () {
        var id = $(this).parent("div").attr("data-id");
        if (confirm("确定要删除这个部门吗?")) {
           alert('删除成功');
        }
          
     });
      
      $('.perMesg').mouseenter(function(){
        $(this).find('dd').addClass('showTrsm');
      }).mouseleave(function(){
        $(this).find('dd').removeClass('showTrsm');
      })
});
  
</script>

@endsection